<template>
  <div class="login">
    <div>
      <el-form :model="form">
        <el-form-item label="账号">
          <el-input prop="username" v-model="form.username" placeholder="“请输入用户名"> </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input prop="password" type="password" v-model="form.password" placeholder="“请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div style="display: flex">
            <el-input prop="code" type="code" v-model="form.code" placeholder="“请输入验证码">
            </el-input>
            <img style="height: 32px" :src="`data:image/gif;base64,${imageCode}`" @click="getCaptchaImage" />
          </div>
        </el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores'

const store = useUserStore()

const imageCode = ref('')

const form = ref({
  username: 'admin',
  password: 'admin123',
  code: '',
  uuid: ''
})

const router = useRouter()
const getCaptchaImage = async () => {

  axios.get('/captchaImage', {
 
  }).then(({ data }) => {
    imageCode.value = data.img
    form.value.uuid = data.uuid
  })
}

const login = () => {
  axios.post(`/login`, form.value).then((res) => {
    ElMessage.success('登录了')
    console.log(res.data)
    store.$state.token = res.data.token
    router.push({
      name: 'user'
    })
  })
}

getCaptchaImage()
</script>

<style scoped></style>
